<template>
	<el-card shadow="never" header="个人信息">
		<el-form ref="form" :rules="rules" :model="form" label-width="120px" style="margin-top:20px;">
			<el-form-item label="头像">
				<sc-upload v-model="form.avatar" :data="{type: 'avatar'}" title="头像上传" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
			</el-form-item>
			<el-form-item label="账号">
				<el-input v-model="form.username" disabled></el-input>
				<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
			</el-form-item>
			<el-form-item label="姓名" prop="nickname">
				<el-input v-model="form.nickname"></el-input>
			</el-form-item>
			<el-form-item label="电子邮箱" prop="email">
				<el-input v-model="form.email"></el-input>
			</el-form-item>
			<el-form-item label="性别" prop="gender">
				<el-select v-model="form.gender" placeholder="请选择">
					<el-option label="保密" :value="0"></el-option>
					<el-option label="男" :value="1"></el-option>
					<el-option label="女" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="个性签名" prop="remark">
				<sc-editor v-model="form.remark" height="100px" toolbar="simple" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submit">保存</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import scEditor from '@/components/scEditor'

export default {
	components: {
		scEditor
	},
	data() {
		return {
			form: {
				avatar: '',
				username: "admin",
				nickname: "Sakuya",
				email: "",
				gender: 0,
				about: "正所谓富贵险中求"
			},
			rules: {
				nickname: [
					{required: true, message: this.$t('login.userError'), trigger: 'blur'}
				],
				email: [
					{required: true, message: this.$t('login.PWError'), trigger: 'blur'}
				]
			}
		}
	},
	mounted(){
		this.getUserInfo();
	},
	methods:{
		async getUserInfo(){
			let res = await this.$API.auth.user.get();
			if(res.code == 1){
				this.form = {avatar: res.data.avatar,username: res.data.username, nickname: res.data.nickname, email: res.data.email, gender: res.data.gender, about: res.data.about, uid: res.data.uid}
			}
		},
		async submit(){
			var validate = await this.$refs.form.validate().catch(()=>{})
			if(!validate){ return false }
			let res = await this.$API.auth.users.edit.post(this.form);
			if(res.code == 1){
				this.$message.success(res.message);
			}else{
				this.$message.error(res.message);
			}
		}
	}
}
</script>

<style>
</style>
